<template>
  <div class="box">
    <el-card style="width: 90%; margin-top: 180px; height: 500px">
      <el-row style="width: 100%" :gutter="20">
        <!-- <el-col :span="10">
          <div slot="header" class="clearfix">
            <span>菜单</span>
          </div>
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="菜单名称">
              <el-select v-model="form.region">
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">立即创建</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </el-col> -->
        <el-col :span="24">
          <el-table :data="tableData" border="">
            <el-table-column prop="id" label="ID" />
            <el-table-column prop="name" label="菜单名称" />
            <el-table-column prop="path" label="path" />
            <el-table-column
              fixed="right"
              label="操作"
              width="200"
              align="center"
            >
              <template slot-scope="scope">
                <!-- <el-button
                  type="danger"
                  size="mini"
                  @click="delClick(scope.row)"
                  >删除</el-button
                > -->
                <el-button
                  type="primary"
                  size="mini"
                  @click="changeClick(scope.row)"
                >编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-card>
    <el-dialog title="修改菜单名称" :visible.sync="dialogFormVisible">
      <el-form :model="diaForm">
        <el-form-item label="菜单名称">
          <el-input v-model="diaForm.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="菜单路由">
          <el-input v-model="diaForm.path" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="diaSure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { add, update, del, getList } from './api/index'
// import Layout from '@/layout'

export default {
  data() {
    return {
      form: {
        name: '',
        type: ''
      },
      dialogFormVisible: false,
      diaForm: {},
      tableData: []
    }
  },
  created() {
    this.getList()
    // const nestedRouter = {
    //   path: '/business',
    //   component: Layout,
    //   redirect: '/business',
    //   name: 'business',
    //   alwaysShow: true,
    //   level: 1,
    //   meta: {
    //     title: '业务类型',
    //     icon: 'nested'
    //   },
    //   children: [
    //     {
    //       path: 'business1',
    //       name: 'business1',
    //       component: () => import('@/views/nested/detail'), // Parent router-view
    //       meta: { title: '类型1' },
    //       roles: ['admin'] // or you can only set roles in sub nav
    //     }
    //   ]
    // }
  },
  methods: {
    getList() {
      getList().then((res) => {
        console.log(res)
        this.tableData = res.obj.data
      })
    },
    delClick(item) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          del({
            id: item.id
          }).then((res) => {
            if (res.code === 1) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.getList()
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    onSubmit() {
      add(this.form).then((res) => {
        if (res.code === 1) {
          this.$message.success('新增成功')
          this.getList()
          this.form = {}
        }
      })
      console.log(this.form)
    },
    changeClick(item) {
      this.dialogFormVisible = true
      this.diaForm = Object.assign({}, item)
    },
    diaSure() {
      update(this.diaForm).then((res) => {
        console.log(res)
        if (res.code === 1) {
          this.dialogFormVisible = false
          this.getList()
          this.$message.success('修改成功')
        }
      })
    }
  }
}
</script>
<style scoped>
.box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.imgList {
  margin-top: 20px;
}
.imgItem {
  position: relative;
  width: 200px;
  height: 200px;
}
.imgItem img {
  width: 200px;
  height: 200px;
}
.delIcon {
  position: absolute;
  width: 20px;
  height: 20px;
  color: #333333;
  line-height: 20px;
  text-align: center;
  background: #f2f2f2;
}
</style>

